import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:lottie/lottie.dart';

import '../../common/config.dart';
import '../../generated/assets.dart';
import '../../router/extension/router.dart';

class ProfessionalWayScreen extends StatefulWidget {
  /// Constructs a [ProfessionalWayScreen]
  const ProfessionalWayScreen({super.key});

  @override
  State<ProfessionalWayScreen> createState() => _ProfessionalWayScreenState();
}

class _ProfessionalWayScreenState extends State<ProfessionalWayScreen> {
  final String title = Config.appName;

  final List<_ProfessionalWay> items = [
    _ProfessionalWay(
      cover: Assets.imageP1,
      title: 'Become A Ghostwriter',
      url: Assets.htmlP1,
    ),
    _ProfessionalWay(
      cover: Assets.imageP2,
      title: 'Become A Graphic Designer',
      url: Assets.htmlP2,
    ),
    _ProfessionalWay(
      cover: Assets.imageP3,
      title: 'Do Voice Acting',
      url: Assets.htmlP3,
    ),
    _ProfessionalWay(
      cover: Assets.imageP4,
      title: 'Do Instagram Marketing',
      url: Assets.htmlP4,
    ),
    _ProfessionalWay(
      cover: Assets.imageP5,
      title: 'Start Dropshipping Business',
      url: Assets.htmlP5,
    ),
  ];

  @override
  void initState() {
    super.initState();
  }

  final List<String> anims = [
    Assets.animNum1,
    Assets.animNum2,
    Assets.animNum3,
    Assets.animNum4,
    Assets.animNum5,
    Assets.animNum6,
    Assets.animNum7,
    Assets.animNum8,
    Assets.animNum9,
    Assets.animNum0,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: GestureDetector(
          onTap: () {
            context.pop();
          },
          child: const Padding(
            padding: EdgeInsets.all(16),
            child: Icon(Icons.arrow_back_ios, color: Colors.white),
          ),
        ),
        title: Text(title, style: const TextStyle(fontSize: 18)),
      ),
      body: SafeArea(
        child: ListView.builder(
          itemBuilder: item,
          itemCount: items.length,
        ),
      ),
    );
  }

  Widget item(BuildContext context, int index) {
    final _ProfessionalWay item = items[index];
    return GestureDetector(
      onTap: () => onClickItem(item),
      behavior: HitTestBehavior.opaque,
      child: Container(
        height: 120,
        padding: const EdgeInsets.symmetric(horizontal: 8).copyWith(top: 8),
        child: Card(
          color: const Color(0xff232428),
          child: Row(
            children: [
              AspectRatio(
                aspectRatio: 384 / 328,
                child: Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(item.cover),
                      fit: BoxFit.fitHeight,
                    ),
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(18),
                      bottomLeft: Radius.circular(8),
                    ),
                  ),
                ),
              ),
              const SizedBox(width: 8),
              Expanded(child: Text(item.title, textAlign: TextAlign.center)),
              Container(
                width: 100,
                height: 50,
                margin: const EdgeInsets.only(left: 4, right: 8),
                alignment: Alignment.center,
                child: lottie(index),
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget lottie(int index) {
    if (index < 10) {
      return Lottie.asset(anims[index]);
    } else if (index < 100) {
      return Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Lottie.asset(anims[index ~/ 10]),
          Lottie.asset(anims[index % 10]),
        ],
      );
    } else {
      return Container();
    }
  }

  void onClickItem(_ProfessionalWay item) {
    context.web(item.url);
  }
}

class _ProfessionalWay {
  final String cover;
  final String title;
  final String url;

  _ProfessionalWay({
    required this.cover,
    required this.title,
    required this.url,
  });
}
